<!DOCTYPE html>
<html lang="en">
<head>
<title>jcrop Demo</title>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<link rel="stylesheet" href="/css/jquery.Jcrop.css" type="text/css" />

<script src="/js/jquery.min.js"></script>
<script src="/js/jquery.Jcrop.js"></script>
<script src="/js/ajaxfileupload.js"></script>

<script type="text/javascript">
	var jcrop_api
	$(function() {
		$('#one-specific-file').ajaxfileupload({
	      action: '/upload',
	      onComplete: function(response) {
				if (typeof jcrop_api != 'undefined'){
	                jcrop_api.destroy();
				}   
				var cropbox = $("#cropbox");
				cropbox.hide();
				cropbox.attr("src", response + "?r="+Math.random());
				cropbox.show();
				callJcrop();
	      }
	    });
	});
	
	function callJcrop() {
		$('#cropbox').Jcrop({
			setSelect: [ 30, 30, 250, 250 ],
			minSize:[30,30],
			aspectRatio: 1,
			onSelect: updateCoords,
			onChange: updateCoords
		},function(){
			jcrop_api = this;
		});
	}

	function updateCoords(c) {
		$('#x').val(c.x);
		$('#y').val(c.y);
		$('#w').val(c.w);
		$('#h').val(c.h);
	};
</script>
</head>
<body>
	<div class="container">
		<div class="row">
			<!-- This is the image we're attaching Jcrop to -->
			<div style="min-height: 250px; ">
				<img id="cropbox" style="display: none;"/>
			</div>
			
			<br />
			
			<form action="">
				<input type="file" id="one-specific-file" name="one-specific-file">
			</form>
			<br />
			<!-- This is the form that our event handler fills -->
			<form action="/save" method="post">
				<input type="hidden" id="x" name="x" />
				<input type="hidden" id="y" name="y" />
				<input type="hidden" id="w" name="w" />
				<input type="hidden" id="h" name="h" />
				<input type="submit" value="裁剪图片" class="btn btn-large btn-inverse" />
			</form>
		</div>
	</div>
</body>

</html>